/**
 * 前端入口
 * tzw 2017年8月21日17:33:18
 */

import React from 'react'
import { Helmet } from 'react-helmet'
import { render, hydrate } from 'react-dom'
import { Provider, observer } from 'mobx-react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
// uri => 页面
import loadable, { loadableReady } from '@loadable/component'
import { loadableRouter } from './utils.jsx'

import router from './page'
import { Navbar } from './component'
import workers from './worker'

const router_arr = loadableRouter(router)

@observer
export default class PageManager extends React.Component {
  render() {
    return (
      <Provider {...workers}>
        <React.Fragment>
          <Helmet>
            <meta charSet="utf-8" />
            <title>魅客云 踹踹</title>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
            />
            <meta
              name="keywords"
              content="魅客云 踹踹"
            />
            <meta
              name="description"
              content="魅客云 踹踹 遇到不清楚的就踹踹，看看反应就清楚了"
            />
            <meta name="full-screen" content="yes" />
            <meta name="x5-fullscreen" content="true" />
            <link
              rel="Shortcut Icon"
              href="http://oscacgbbh.bkt.clouddn.com/ico_16X16.ico"
            />
            <link
              rel="Bookmark"
              href="http://oscacgbbh.bkt.clouddn.com/ico_16X16.ico"
            />
          </Helmet>
          <Navbar />
          <Switch>
            {router_arr.map(item => (
              <Route
                key={item.key}
                path={item.key}
                render={props => (
                  <item.component {...props} fallback={<div>页面加载中</div>} />
                )}
              />
            ))}
          </Switch>
        </React.Fragment>
      </Provider>
    )
  }
}

if (typeof document !== 'undefined') {
  // render方式
  const render_fun = process.env.IS_SSR ? hydrate : render
  const async = process.env.IS_SSR ? loadableReady : f => f()
  async(() => {
    render_fun(
      <Router>
        <Route component={PageManager} />
      </Router>,
      document.getElementById('wrap')
    )
  })
}
